<template>
  <div>
    <div class="order" v-for="(order,index) in list" :key="index">
      <div class="order-title">
        <div style="height: 50px;margin-bottom: 5px">
          <img src="../../public/imgs/shop.png" style="width: 30px;height: 30px;float: left;margin-top: 20px;">
          <P style="line-height: 73px;margin-left: 10px;display: inline-block;color: black">
            {{order.merchants.store_name}}</P>
        </div>
        <div style="display: flex">
          <p style="color: #ff6700;font-size: 20px;height: 40px">{{order.statusDesc}}</p>
          <count-down :createtime="order.createTime" :takseTime="order.paymentTime" :status="order.status"
                      style="flex: 2"></count-down>
        </div>
        <div>
          <div class="item-info fl">
            {{order.createTime}}
            <span>|</span>
            收货人:{{order.receiverName}}
            <span>|</span>
            订单号：{{order.orderNo}}
            <span>|</span>
            {{order.paymentTypeDesc}}
          </div>
          <div class="item-money fr">
            <span>应付金额：</span>
            <span class="money">{{order.payment}}</span>
            <span>元</span>
          </div>
        </div>

      </div>
      <div class="order-content">
        <div class="good-box">
          <div v-for="(item,i) in order.items" :key="i">
            <div class="good-list">
              <div style="width: 70%;display: flex">
                <div class="good-img">
                  <img :src="item.imgurl" alt="">
                </div>
                <div class="good-name">
                  <div class="p-name" style="padding-top: 20px">{{item.productName}}</div>
                  <div class="p-money">{{item.currentUnitPrice + '元 X' + item.quantity}}</div>
                </div>
              </div>
              <div class="order-actions" v-if="i==0">
                <a class="btn-normal btn-small btn-primary" v-if="order.status==0"
                   @click="goPay(order.orderNo)">立即付款</a>
                <a class="btn-normal btn-small btn-primary" v-if="order.status==1||order.status==2" @click="takegoods(order.orderNo)">确认收货</a>
                <a class="btn-normal btn-small btn-gray"
                   @click="$router.push({path:'/order/orderDetial',query:{out_trade_no:order.orderNo}})">查看详情</a>
                <a class="btn-normal btn-small btn-gray" v-if="order.status!=0&&order.status!=5"
                   @click="$router.push({path:'/serviceBase/serviceGoods',query:{orderNo:order.orderNo}})">申请售后</a>
                <a class="btn-normal btn-small btn-gray"
                   @click="$router.push({path:'/clientService',query:{store_id:order.storeid,orderNo:order.orderNo}})">联系客服</a>
                <!--              <a class="btn-normal btn-small btn-gray"  @click="$router.push({path:'/customerService',query:{serviceNo:order.orderNo}})" >回复</a>-->
                <a class="btn-normal btn-small btn-primary" v-if="order.status==11">订单已关闭</a>
              </div>
            </div>
            <div v-for="insurance in item.insuranceGoods" class="good-list">
              <div style="width: 70%;display: flex">
                <div class="good-img">
                  <img :src="insurance.icon" alt="" width="80px">
                </div>
                <div class="good-name">
                  <div class="p-name" style="padding-top: 20px">{{insurance.name}}</div>
                  <div class="p-money">{{insurance.price + '元 X' + item.quantity}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--      <div class="good-state fr" v-if="order.status == 10">-->
        <!--        <a href="javascript:;">{{order.statusDesc}}</a>-->
        <!--      </div>-->

        <!--        <div class="good-state fr" v-else>-->
        <!--          <a href="javascript:;" @click="goPay(order.orderNo)">{{order.statusDesc}}</a>-->
        <!--        </div>-->
      </div>
    </div>

    <el-pagination
      class="pagination"
      background
      layout="prev, pager, next"
      :pageSize="pageSize"
      :total="total"
      @current-change="handleChange"
    >
    </el-pagination>
  </div>
</template>

<script>
  import countDown from "../components/countDown";

  export default {
    name: "orderBody",
    props: {
      list: {
        type: Array,
        default: () => {
        }
      }
    },
    components: {
      countDown
    },
    data() {
      return {
        pageSize: 10,
        pageNum: 1,
        total: 0,
        time: ''
      }
    },
    methods: {
      // 第一种方法：分页器
      handleChange(pageNum) {
        this.pageNum = pageNum
        this.getOrderList()
      },
      goPay(orderNo) {
        // 三种路由跳转方式
        // this.$router.push('/order/pay')
        // this.$router.push({
        //   name: 'order-pay',
        //   query: {
        //     orderNo: orderNo
        //   }
        // })
        this.$router.push({
          path: '/order/pay',
          query: {
            orderNo
          }
        })
      },
      takegoods(orderNo) {

        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {


        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

        this.$confirm('确定要收货吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.get('/orders/takeGoods', {params: {orderNo}}).then((res) => {
            console.log("sss")
            if (res.code =="200"){
              this.$message({
                type: 'success',
                message: '确认收货成功!'
              });
              this.$emit("orderUpdate")
            }
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消收货'
          });
        });

      }

    },
    created() {


    },
    mounted() {
      // this.list.forEach((item)=>{
      //   console.log(item)
      //
      // })

      var that = this
      setTimeout(function () {

        that.list.forEach((item) => {


        })


      }, 2000)

      // this.time = Date.parse(this.list.createTime)

      // setInterval(function (res) {
      //   this.time -= 1
      //
      // }, 1000)

    }

  }
</script>

<style scoped lang="scss">
  @import './../assets/scss/config.scss';
  @import './../assets/scss/mixin.scss';

  .btn-normal {
    text-align: center;
    color: #e0e0e0;
    display: block;
    margin: 0 0 10px auto;
    cursor: pointer;
    transition: all .4s;
  }

  .btn-gray {

    border: 1px solid #b0b0b0;
    color: #757575;
  }

  .btn-small {
    width: 118px;
    height: 28px;
    font-size: 12px;
    color: #757575;
    line-height: 28px;
  }

  .btn-primary {

    background: #ff6700;
    color: #ffffff;

  }

  .order-actions {
    float: right;
    width: 20%;
    text-align: right;
    margin-top: 20px;
    vertical-align: top;
    padding: 25px 5px;
  }

  .order {
    @include border();
    border-color: #ff6700;
    background-color: $colorG;
    margin-bottom: 31px;

    &:last-child {
      margin-bottom: 0;
    }

    .order-title {
      @include height(150px);
      background-color: $colorK;
      padding: 5px 43px 0px 43px;
      line-height: 50px;
      font-size: 16px;
      color: $colorC;

      .item-info {
        width: 70%;
        float: left;

        span {
          margin: 0 9px;
        }
      }

      .item-money {
        float: right;
      }

      .money {
        font-size: 26px;
        color: $colorB;
      }
    }

    .order-content {
      padding: 20px 43px;
      min-height: 150px;


      .good-box {
        width: 100%;
        min-height: 150px;

        .good-list {
          width: 100%;
          display: flex;
          align-items: center;
          height: 120px;

          .good-img {
            width: 80px;

            img {
              width: 100%;
            }
          }

          .good-name {
            font-size: 14px;
            padding-left: 20px;
            color: $colorB;
          }
        }
      }

      .good-state {
        @include height(145px);
        font-size: 20px;
        color: $colorA;

        a {
          color: $colorA;
        }
      }
    }
  }
</style>
